<template>
  <el-dialog
    title="更新页面"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="40%"
    class="newspage"
    :before-close="handleClose">
    <el-form label-width="120px" label-position="right" style="width:85%;">
      <el-form-item label="标题：">
          <el-input type="text" size="small" v-model="page.title"  placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="名称：">
          <el-input type="text" size="small" v-model="page.name" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="宽度：">
          <el-input-number type="text" :min="0" size="small" v-model="page.style.width"></el-input-number> px
      </el-form-item>
      <el-form-item label="高度：">
          <el-input-number type="text" :min="0" size="small" v-model="page.style.height"></el-input-number> px
      </el-form-item>
      <el-form-item label="页面组：" class="_boxGroups">
        <el-input type="text" size="small" v-model="page.path" :disabled="true"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="intCreate">更 新</el-button>
    </span>
  </el-dialog>
</template>
<script type="text/javascript">
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('cloud')
export default {
  props:{
    value:[Object,Array,String,Number,Boolean]
  },
  components: {
    //empty
  },
  data() {
    return { 

      dialogVisible:false,
      page:{
        title:"",
        type:"page",
        name:"",
        style:{
          width:800,
          height:500,
        },
        path:"",
      },

      pathName:'',
      data:null,
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

    this.getDetail();
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapActions(['setResourcesData']),
    getDetail(){
      let data = this.value.config.data;
      this.$cloud.post('build/page_one', {path:data.path,name:data.name}).then(response => {
        this.data = response;
        this.page = response.config.data;
        this.page.style.width = parseInt(this.page.style.width);
        this.page.style.height = parseInt(this.page.style.height);
      })
    },

    handleClose(){
      this.dialogVisible = false;
    },


    /**
     * 更新页面
     * @return {[type]} [description]
     */
    intCreate(){
      //判断规则
      if(!this.checked()){
        return false;
      }
      
      // this.page.style.width = this.page.style.width + 'px';
      // this.page.style.height = this.page.style.height + 'px';

      this.$cloud.post('build/page_save',this.data).then(response =>{
        this.dialogVisible = false;
        this.$message.success('更新成功！');

        this.page.label = this.page.title+"("+this.page.name+")";
        this.data.config.data = this.page;
        for(let key in this.data){
          this.value[key] = this.data[key];
        }
      })
    },


    /**
     * 检查输入是否合法
     * @return {[type]} [description]
     */
    checked(){
      let ret = false;
      let tips = '';
      let rules = /^[a-zA-Z0-9]+$/;
      if(!this.page.title){
        tips = '请输入标题！';
        ret = true;
      }else if(!(this.page.style.width > 0 && this.page.style.height > 0 )){
        tips = "请输入有效的宽高值！";
        ret = true;
      }else if(!this.page.path){
        tips = '请选择页面分组！';
        ret = true;
      }

      if(ret){
        this.$message.warning(tips);
      }
      return !ret;
    }


  }
}

</script>
<style type="text/css" lang="scss">
.newspage{
  .el-dialog{
      min-width: 555px;
  }
  .el-form-item{
    margin-bottom: 5px;
  }
}
.newspage-add-group{
  ._content{
    display: flex;
    align-items: center;
    justify-content:flex-start;    
  }
  ._tips{
    color:red;
    font-size: 12px;
    line-height: 24px;
  }
  .el-button--mini,.el-input__inner,.el-button{
    border-radius: 0px;
  }
  .el-dialog__body{
    padding-top: 0px;
  }
  .el-dialog__footer{
    padding: 0px;
    margin:0px;
  }
}
</style>
